<template>
  <div class="app-container">
    <el-row class="pl-6" :gutter="40">
      <el-col
        :span="17"
        class="border-solid border-1 border-gray-300 rounded-2xl p-6"
      >
        <div :span="24">
          <TitleName
            :title="formData.title"
            icon="i-carbon-bookmark-filled"
            class="pb-3"
            :iconStyle="{ fontSize: '24px' }"
            :titleStyle="{ fontSize: '24px' }"
          ></TitleName>
        </div>
        <div :span="24">
          <div
            class="flex items-center justify-between border-solid border-1 border-gray-300 bg-gray-100 py-2 px-10"
          >
            <div>
              <span class="text-gray-400">发布人员:</span
              ><span>{{ formData.createName }}</span>
            </div>
            <div>
              <span class="text-gray-400">发文部门:</span
              ><span>{{ formData.department }}</span>
            </div>
            <div>
              <span class="text-gray-400 pl-3">发布时间:</span
              ><span>{{ formData.publishTime }}</span>
            </div>
            <div>
              <span class="text-gray-400 pl-3">接收人员:</span
              ><span>
                <dict-drop
                  class="inline-block"
                  :options="receive_type"
                  :value="formData.receiveType"
                  v-if="
                    formData.receiveType !== '4' && formData.receiveType !== '5'
                  "
                />
                <span v-else-if="formData.receiveType == '4'">
                  <el-tooltip
                    :disabled="showTip"
                    class="box-item"
                    effect="dark"
                    :content="formData.receiveUserName"
                    placement="top"
                  >
                    <span
                      class="truncate inline-block max-w-xs align-bottom"
                      @mouseenter="spanMouseenter($event)"
                      >{{ formData.receiveUserName }}</span
                    >
                  </el-tooltip></span
                >
                <span v-else-if="formData.receiveType == '5'">
                  <el-tooltip
                    :disabled="showTip"
                    class="box-item"
                    effect="dark"
                    :content="formData.groupName"
                    placement="top"
                  >
                    <span
                      class="truncate inline-block max-w-xs align-bottom"
                      @mouseenter="spanMouseenter($event)"
                      >{{ formData.groupName }}</span
                    >
                  </el-tooltip></span
                >
              </span>
            </div>
            <div>
              <span class="text-gray-400 pl-3">浏览次数:</span
              ><span>{{ formData.viewCount }}</span>
            </div>
            <!-- <span>发布人员:</span><span>华雪云</span> -->
          </div>
        </div>
        <div class="mb-6 bg-slate-100 p-4 text-14px" v-if="formData.summary">
          <span> 摘要： </span>
          <span v-html="formData.summary" />
        </div>
        <div :span="24">
          <iframe
            v-if="prUrl"
            :src="url"
            frameborder="0"
            class="w-full h-70vh"
          ></iframe>
        </div>
        <div :span="24" v-show="formData.originalLink">
          <el-link
            :href="formData.originalLink"
            :underline="false"
            type="primary"
            ><el-icon><Link /></el-icon>原文链接</el-link
          >
        </div>
        <div :span="24" v-show="formData.attachment.length > 0">
          <TitleName
            title="相关附件"
            icon="i-carbon-bookmark-filled"
            class="pb-3"
          ></TitleName>
          <div v-for="item in formData.attachment" :key="item.fileName">
            <el-link :href="item.url" :underline="false" type="primary">{{
              item.origFileName
            }}</el-link>
          </div>
        </div>
      </el-col>
      <el-col :span="7">
        <div
          class="border-solid border-1 border-gray-300 rounded-2xl overflow-hidden mr-2"
          style="min-height: 460px"
        >
          <el-radio-group
            v-model="tabVal"
            size="large"
            class="flex justify-between items-center w-full"
          >
            <template v-for="(item, index) in tabList" :key="index">
              <el-radio-button
                :label="item.name"
                :style="{ width: radioBtnWidth }"
                @mouseenter="mouseOv(item.name)"
                ><span class="text-1xl">{{ item.label }}</span></el-radio-button
              >
            </template>
          </el-radio-group>
          <div v-loading="loading" v-show="noticeList.length > 0">
            <div
              class="flex items-center w-full px-4 py-4 new-list"
              v-for="(item, index) in noticeList"
              :key="index"
            >
              <div class="w-1/24 sort-box">{{ index + 1 }}</div>
              <div class="w-20/24 pl-3">
                <el-link
                  class="justify-start w-full"
                  :underline="false"
                  @click="rowClick(item)"
                  ><div class="truncate w-full">
                    {{ item.title }}
                  </div></el-link
                >
              </div>
              <div class="w-2/24">
                <dict-drop :options="is_read" :value="item.isRead" />
              </div>
            </div>
          </div>
          <div
            class="flex justify-center items-center w-full py-4"
            v-show="noticeList.length == 0"
          >
            暂无数据
          </div>
        </div>

        <div
          class="border-solid border-1 border-gray-300 p-2 mt-6 rounded-2xl mr-2 hover:bg-#2f9bff hover:text-#fff"
          @click="rowClick({ id: formData.preAnnouncementId })"
        >
          <div class="pb-3">上一篇：</div>
          <!-- <el-link
            :underline="false"
            class="text-2xl"
            v-show="formData.preAnnouncementId"
            >{{ formData.preAnnouncementTitle }}</el-link
          > -->
          <span class="text-xl">{{ formData.preAnnouncementTitle }}</span>
          <span class="text-xl" v-show="!formData.preAnnouncementId"
            >当前已是首篇</span
          >
        </div>
        <div
          class="border-solid border-1 border-gray-300 p-2 mt-6 rounded-2xl mr-2 hover:bg-#2f9bff hover:text-#fff"
          @click="rowClick({ id: formData.nextAnnouncementId })"
        >
          <div class="pb-3">下一篇：</div>
          <!-- <el-link
            :underline="false"
            class="text-2xl"
            v-show="formData.nextAnnouncementId"
            >{{ formData.nextAnnouncementTitle }}</el-link
          > -->
          <span class="text-xl">{{ formData.nextAnnouncementTitle }}</span>
          <span class="text-xl" v-show="!formData.nextAnnouncementId"
            >当前已是末篇</span
          >
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup name="NoticeDetails">
import { reactive, toRefs, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { listNotice, getNotice, readNotice } from '@/api/system/notice'
import useUserStore from '@/store/modules/user'
import useCommonStore from '@/store/modules/common'
import { getTreeNodeByParam } from '@/utils/commo'
import * as base64 from 'js-base64'
const router = useRouter()
const route = useRoute()
const commonStore = useCommonStore()
const { proxy, type } = getCurrentInstance()
const { announcement_type, receive_type, is_read } = proxy.useDict(
  'announcement_type', //  --公告类型
  'receive_type', //  --接收类型
  'is_read'
)

const props = defineProps({
  noticeData: {
    type: Object,
    require: false
  },
  noticeId: {
    type: [Number, String],
    require: false
  }
})
const prUrl = ref(null)
const data = reactive({
  loading: false,
  formData: {
    attachment: []
  },
  userOption: { publishUsers: [] }, //人员选择下拉
  url: computed(() => {
    return `${
      import.meta.env.VITE_VIEW_FILE_URL
    }/onlinePreview?url=${encodeURIComponent(
      base64.encode(prUrl.value)
    )}&watermarkTxt=${useUserStore().user.nickName}`
  }),
  tabVal: 'speed',
  tabList: [
    {
      label: '一周速读',
      name: 'speed'
    },
    {
      label: '新闻中心',
      name: 'news'
    },
    {
      label: '产品信息',
      name: 'product'
    }
  ],
  noticeList: []
})
let { loading, formData, userOption, url, tabVal, tabList, noticeList } =
  toRefs(data)
// 计算tab项的宽度
const radioBtnWidth = ref(
  computed(() => {
    let tabArr = tabList.value
    return `${100 / tabArr.length}%`
  })
)

watch(
  () => data.tabVal,
  () => {
    let queryParam = {}
    if (tabVal.value == 'speed') {
      queryParam = {
        announcementType: '01'
      }
    }
    if (tabVal.value == 'news') {
      queryParam = {
        announcementType: '02'
      }
    }
    if (tabVal.value == 'product') {
      queryParam = {
        announcementType: '03'
      }
    }
    getList(queryParam)
  },
  {
    immediate: true
  }
)
watch(
  [() => route.query.noticeId, () => props.noticeId],
  () => {
    if ((route.query.noticeId && route.name == type.name) || props.noticeId) {
      let id = route.query.noticeId || props.noticeId
      getFormData(id)
    }
  },
  {
    immediate: true
  }
)

const showTip = ref(false)
function spanMouseenter(ev) {
  if (ev.target.clientWidth < ev.target.scrollWidth) {
    showTip.value = false
  } else {
    showTip.value = true
  }
}

// 鼠标悬浮事件
function mouseOv(val) {
  tabVal.value = val
  console.log('val==>', val)
}
/** 获取产品详情
 * @param {number}  id 表单id
 */
function getFormData(id) {
  proxy.$modal.loading('加载中')
  // 标记已读
  readNotice(id).then(() => {
    getNotice(id).then(async res => {
      proxy.$modal.closeLoading()
      let resData = {}
      resData = res.data
      formData.value = resData
      prUrl.value = formData.value.detail[0].url
      console.log('prUrl.value==>', prUrl.value)
      // 获取发布员
      if (formData.value.receiveUserArr) {
        await getDefaultUserInfo(
          formData.value.receiveUserArr,
          '_receiveUserArr',
          'receiveUserArr'
        )
      }
    })
  })
}
/** 查询公告列表 */
function getList(queryParam) {
  loading.value = true
  let queryParams = {
    ...{
      pageNum: 1,
      pageSize: 10
    },
    ...queryParam
  }
  listNotice(queryParams).then(response => {
    noticeList.value = response.rows
    loading.value = false
  })
}
/**查看详情 */
function rowClick(row) {
  goTo('/rsgl/other/noticeDetails', { noticeId: row.id })
}
function goTo(url, data) {
  router.push({ path: url, query: data })
}
/**
 * 根据当前用户id转为uuid（id前加u）
 * @param val 输入用户的id
 * @param fieldName 需要赋值的字段
 * @param selectArr 用户的字典
 */
async function getDefaultUserInfo(val, fieldName, selectArr) {
  let userTree = await commonStore.getUseTreeData()
  userOption.value[selectArr] = []
  let id = ''
  if (val) {
    id = val
  }
  if (Array.isArray(id)) {
    formData.value[fieldName] = []
    id.forEach(item => {
      let obj = getTreeNodeByParam(userTree, item, 'id', [])
      userOption.value[selectArr].push(...obj)
      formData.value[fieldName].push(obj[0].uuid)
    })
  } else {
    //根据当前用户id获取uuid
    let obj = getTreeNodeByParam(userTree, id, 'id', [])
    userOption.value[selectArr] = obj
    formData.value[fieldName] = obj[0].uuid
  }
}
function init() {}
init()
</script>
<style lang="scss" scoped>
.new-list {
  &:nth-child(-n + 3) {
    .sort-box {
      background: rgba(255, 153, 0, 1);
      color: #fff;
    }
  }
  .sort-box {
    background: rgb(255, 255, 255);
    border: 1px solid #ebebeb;
    height: 20px;
    width: 20px;
    text-align: center;
    line-height: 20px;
    border-radius: 5px;
  }
}
:deep(.el-radio-button--large .el-radio-button__inner) {
  width: 100%;
}
:deep(.el-link__inner) {
  width: 100%;
}
</style>
